<template>
  <div class="page-content flex flex-direction" v-if="!isDetail">
    <el-card shadow="never"  class="card flex-sub" style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header" @click="panelActive = !panelActive">
            <i
              class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]"
            />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small" :inline="true">
                  <el-form-item label="设备编码" label-width="80px">
                    <el-input
                      v-model="searchModel.deviceSource"
                      placeholder="设备编码"
                      clearable
                      class="filter-item search-item"
                    />
                  </el-form-item>
                  <el-form-item label="设备名称" label-width="80px">
                    <el-input
                      v-model="searchModel.deviceName"
                      placeholder="设备名称"
                      clearable
                      class="filter-item search-item"
                    />
                  </el-form-item>
                  <el-form-item label="设备使用情况" label-width="80px">
                    <el-select
                      v-model="searchModel.status"
                      popper-class="global-select"
                      placeholder="选择使用情况"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in searchArray.statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否激活" label-width="80px">
                    <el-select
                      v-model="searchModel.isActive"
                      placeholder="选择是否激活"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in searchArray.isActiveList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item style="margin-left: 10px">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="toSearch"
                      size="small"
                      style="margin-right: 10px"
                      >搜素</el-button
                    >
                    <el-button
                      icon="el-icon-delete"
                      @click="toReset"
                      type="info"
                      size="small"
                      style="margin-right: 10px"
                      >重置</el-button
                    >
                    <el-button size="small" @click="getDataList">
                      <i class="el-icon-refresh" style="color: #606266" />
                      <span style="color: #606266">刷新</span>
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div>
        <el-table
          ref="elTable"
          size="medium"
          v-loading="loading || deleteLoading"
          border
          fit
          :header-cell-style="{ background: '#fafafa' }"
          :data="dataList"
          :row-key="(row) => row.id"
          style="width: 100%"
          :element-loading-text="deleteLoading ? '删除中,请等待...' : ''"
          @sort-change="onSortChange"
          @selection-change="onSelectionChange"
        >
          <af-table-column
            align="center"
            type="selection"
            width="40"
            fixed
            :reserve-selection="true"
          />
          <el-table-column
            align="center"
            type="index"
            width="50"
            fixed
            label="#"
            :index="indexMethod"
          />
          <af-table-column
            align="center"
            label="设备编码"
            prop="deviceSource"
          />
          <af-table-column align="center" label="设备名称" prop="deviceName" />
          <af-table-column align="center" label="设备使用情况" prop="status">
            <template slot-scope="{ row }">
              <el-tag
                size="small"
                :style="row.status | constantKeyTagStyleObj('DEVICE_STATUS')"
              >
                {{ row.status | constantKeyValue('DEVICE_STATUS') }}
              </el-tag>
            </template>
          </af-table-column>
          <af-table-column
            align="center"
            label="设备运行状态"
            prop="deviceRunningState"
          />
          <af-table-column align="center" label="是否激活" prop="isActive">
            <template slot-scope="{ row }">
              <span v-if="row.isActive == 1">已激活</span>
              <span v-if="row.isActive == 0">未激活</span>
            </template>
          </af-table-column>
          <af-table-column
            align="center"
            label="设备类型"
            prop="deviceTypeStr"
          />
          <af-table-column
            align="center"
            label="设备型号"
            prop="deviceModel"
            width="120"
          />
          <af-table-column
            align="center"
            label="设备位置"
            prop="deviceLocation"
          >
            <template slot-scope="{ row }">
              <a class="a-text" @click="toLookLocation(row)">
                {{
                  row.gridMountFullPathText == null ||
                  row.gridMountFullPathText == ''
                    ? ''
                    : row.gridMountFullPathText + '>>'
                }}{{ row.deviceLocation }}
              </a>
            </template>
          </af-table-column>
          <af-table-column align="center" label="厂家" prop="manufactor" />
          <af-table-column
            align="center"
            label="所属网格"
            prop="gridMountFullPathText"
          />
          <af-table-column
            align="center"
            label="创建时间"
            prop="createdTime"
            sortable
            width="150"
          />

          <el-table-column align="center" label="操作" fixed="right" width="80">
            <template slot-scope="{ row }">
              <el-tooltip effect="dark" content="详情" placement="top-start">
                <i
                  class="iconfont icon-chakanxiangqing2 i-detail"
                  @click="toDetail(row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList"
          style="padding-top: 1rem"
        />
      </div>
    </el-card>

    <device-detail
      v-if="detailDialogObj.isVisible"
      ref="detailDialog"
      :dialog-visible="detailDialogObj.isVisible"
      :title="detailDialogObj.title"
      :params="params"
      @close="dialogClose('detailDialogObj')"
    />

    <device-map
      v-if="deviceLocationDialogObj.isVisible"
      :dialog-visible="deviceLocationDialogObj.isVisible"
      :title="deviceLocationDialogObj.title"
      :device-location="clickedDeviceLocation"
      :max-height-dialog="maxHeightDialog"
      :list-type="'查看详情'"
      :device-obj="clickedDeviceObj"
      @close="dialogClose('deviceLocationDialogObj')"
    />
  </div>
  <div v-else class="page-content flex flex-direction">
    <Detail :id="id" @goBack="goBack" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import deviceManageApi from '@/api/device-manage'
import recDataDeviceList from './device-list.js'
import DeviceDetail from './component/Detail'
import { getToken } from '@/utils/auth'
import Detail from './detail/index.vue'
export default {
  name: 'DeviceList',
  components: {
    Pagination,
    DeviceDetail,
    Detail,
  },
  mixins: [dataTableMixins],
  data() {
    return {
      id: null,
      isDetail: false,
      searchArray: recDataDeviceList.RecDataSearchArray,
      deleteLoading: false,
      popoverVisible: false,
      maxHeightDialog: '0px',
      deviceLocationDialogObj: {
        isVisible: false,
        title: '',
      },
      clickedDeviceLocation: '',
      clickedDeviceObj: {},
      isRelationVisible: false,
      params: null,

      deviceDictionaries: [],
      action: process.env.VUE_APP_BASE_API + 'main/equipment/uploadExcel',
      headers: {
        Authorization: `bearer ${getToken()}`,
      },
    }
  },
  created() {},
  mounted() {
    this.getDictValueAttr()
  },
  methods: {
    getDictValueAttr() {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue
        this.getDataList()
      })
    },
    getDataList() {
      this.loading = true
      this.searchModel.deviceType = 2
      this.searchModel.deviceIsLine = 1
      const searchModel = this.formatSearchData(this.searchModel)

      deviceManageApi
        .getSurveySmokeList({
          ...this.pagination,
          ...searchModel,
          ...this.sort,
        })
        .then((ret) => {
          this.dataList = ret.data.data.rows

          this.dataList.forEach((ele, i) => {
            this.selectedDataList.forEach((multEle, j) => {
              if (this.dataList[i].id === this.selectedDataList[j].id) {
                this.$refs.elTable.toggleRowSelection(this.dataList[i], true)
              }
            })

            this.deviceDictionaries.forEach((ele1, i1) => {
              if (Number(ele.deviceType) === ele1.dictValue) {
                ele.deviceTypeStr = ele1.dictText
              }
            })
          })
          this.total = ret.data.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch() {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset() {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSortChange(val) {
      console.log(val)
      this.sort.field = val.prop
      this.sort.order = val.order
      this.toSearch()
    },
    onSelectionChange(selection) {
      this.selectedDataList = selection
    },
    toEmptySelection() {
      this.$refs.elTable.clearSelection()
    },
    indexMethod(index) {
      return this.formatIndex(index, this.pagination)
    },
    toSingleDelete(data, index, type) {
      if (type === '确定') {
        this.deleteConfirm(data.id, '')
      }
    },
    // 跳转详情
    toDetail(row) {
      // this.$router.push({
      //   path: '/detail',
      //   query: {
      //     id: row.id
      //   }
      // })
      this.isDetail = true
      this.id = row.id
    },
    // toDetail(data) {
    //   this.params = {
    //     item: data
    //   }
    //   this.detailDialogObj.title = '设备清单 ＞详情'
    //   this.detailDialogObj.isVisible = true
    // },
    // 返回
    goBack() {
      this.isDetail = false
    },
    afterSubmit(operationType) {
      if (operationType === 'add') {
        this.toReset()
      } else {
        this.getDataList()
      }
    },
    toLookLocation(data) {
      if (data.deviceLocation && data.deviceLocation !== '') {
        this.maxHeightDialog = this.getHeightAndWidth()
        this.deviceLocationDialogObj.title = '设备位置'
        this.deviceLocationDialogObj.isVisible = true
        this.clickedDeviceLocation = data.deviceLocation
        this.clickedDeviceObj = data
      }
    },
    getHeightAndWidth() {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }
      return clientHeight - 220 + 'px'
    },
  },
}
</script>

<style lang="scss">
@import '../../../../styles/custom';
</style>
